<template>
  <div class="service-manage-container">
    <div class="service-header">
      <h1>服务请求管理</h1>
      <div class="service-stats">
        <div class="stat-card">
          <span class="stat-icon">🛠</span>
          <div class="stat-content">
            <h3>总请求数</h3>
            <p>{{ serviceRequests.length }}</p>
          </div>
        </div>
        <div class="stat-card">
          <span class="stat-icon">⏳</span>
          <div class="stat-content">
            <h3>待处理</h3>
            <p>{{ pendingRequestsCount }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="service-form-section">
      <form @submit.prevent="createServiceRequest" class="service-form">
        <div class="form-row">
          <div class="form-group">
            <label for="serviceType">服务类型</label>
            <select 
              v-model="serviceRequest.serviceType" 
              required 
              class="form-control"
            >
              <option value="repair">维修</option>
              <option value="cleaning">清洁</option>
              <option value="other">其他</option>
            </select>
          </div>
          <div class="form-group">
            <label for="description">详细描述</label>
            <textarea 
              v-model="serviceRequest.description" 
              required 
              class="form-control description"
              placeholder="请详细描述您的服务需求"
            ></textarea>
          </div>
        </div>
        <button type="submit" class="submit-button">
          <span class="button-icon">➕</span>
          提交服务请求
        </button>
      </form>
    </div>

    <div class="service-requests-section">
      <h2>我的服务请求</h2>
      <div v-if="filteredServiceRequests.length === 0" class="no-requests">
        <p>暂无服务请求</p>
      </div>
      
      <transition-group 
        name="request-list" 
        tag="div" 
        class="service-requests-grid"
      >
        <div 
          v-for="request in filteredServiceRequests" 
          :key="request.requestId" 
          class="service-request-card"
          :class="{
            'request-pending': request.status === 'pending',
            'request-assigned': request.status === 'assigned',
            'request-completed': request.status === 'completed'
          }"
        >
          <div class="request-header">
            <h3>{{ getServiceTypeText(request.serviceType) }}</h3>
            <span class="request-status">
              {{ getStatusText(request.status) }}
            </span>
          </div>
          <div class="request-body">
            <p class="request-description">{{ request.description }}</p>
            <div class="request-details">
              <div class="request-date">
                <span>申请时间</span>
                <p>{{ formatDate(request.createdAt) }}</p>
              </div>
              <div class="request-update-date">
                <span>更新时间</span>
                <p>{{ formatDate(request.updatedAt) }}</p>
              </div>
            </div>
          </div>
        </div>
      </transition-group>
    </div>

    <!-- 通知消息 -->
    <div v-if="error" class="notification error">{{ error }}</div>
    <div v-if="success" class="notification success">{{ success }}</div>
  </div>
</template>

<script>
export default {
  name: 'ServiceManage',
  data() {
    return {
      serviceRequest: {
        ownerId: JSON.parse(localStorage.getItem('user')).ownerId,
        serviceType: 'repair',
        description: '',
        status: 'pending',
        assignedTo: null,
        createdAt: null,
        updatedAt: null
      },
      serviceRequests: [],
      success: null,
      error: null,
      baseUrl: 'http://localhost:8080/api/service-requests'
    };
  },
  computed: {
    filteredServiceRequests() {
      return this.serviceRequests
        .filter(request => request.ownerId === this.serviceRequest.ownerId)
        .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
    },
    pendingRequestsCount() {
      return this.filteredServiceRequests.filter(
        request => request.status === 'pending'
      ).length;
    }
  },
  methods: {
    formatDate(dateString) {
      if (!dateString) return '未知';
      return new Date(dateString).toLocaleString();
    },
    async createServiceRequest() {
      try {
        const response = await fetch(this.baseUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.serviceRequest)
        });

        if (!response.ok) throw new Error('创建服务请求失败');

        this.success = '服务请求已成功创建！';
        this.error = null;
        this.resetForm();
        this.fetchServiceRequests();
      } catch (err) {
        this.error = err.message;
        this.success = null;
      }
    },
    async fetchServiceRequests() {
      try {
        const response = await fetch(this.baseUrl);
        if (!response.ok) throw new Error('获取服务请求失败');
        this.serviceRequests = await response.json();
      } catch (err) {
        this.error = err.message;
      }
    },
    resetForm() {
      this.serviceRequest.serviceType = 'repair';
      this.serviceRequest.description = '';
    },
    getServiceTypeText(serviceType) {
      const typeMap = {
        'repair': '维修服务',
        'cleaning': '清洁服务',
        'other': '其他服务'
      };
      return typeMap[serviceType] || serviceType;
    },
    getStatusText(status) {
      const statusMap = {
        'pending': '待处理',
        'assigned': '处理中',
        'completed': '已完成'
      };
      return statusMap[status] || status;
    }
  },
  created() {
    this.fetchServiceRequests();
  }
}
</script>

<style scoped>
.service-manage-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--gray-light);
}

.service-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.service-header h1 {
  font-size: 2rem;
  color: var(--text-color);
}

.service-stats {
  display: flex;
  gap: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  background-color: white;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 2rem;
  margin-right: 15px;
}

.stat-content h3 {
  font-size: 0.9rem;
  color: var(--gray);
  margin-bottom: 5px;
}

.stat-content p {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-color);
}

.service-form-section {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.service-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 0.9rem;
  color: var(--text-color);
}

.form-control {
  padding: 12px;
  border: 1px solid var(--gray);
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-color);
}

.description {
  min-height: 120px;
  resize: vertical;
}

.submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-button:hover {
  background-color: var(--secondary-color);
}

.button-icon {
  font-size: 1.2rem;
}

.service-requests-section h2 {
  font-size: 1.5rem;
  color: var(--text-color);
  margin-bottom: 20px;
}

.no-requests {
  text-align: center;
  color: var(--gray);
  padding: 20px;
  background-color: white;
  border-radius: 12px;
}

.service-requests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.service-request-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.service-request-card:hover {
  transform: translateY(-5px);
}

.request-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.request-status {
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 4px;
}

.request-pending .request-status {
  background-color: #fff5f5;
  color: #ff6b6b;
}

.request-assigned .request-status {
  background-color: #f0f9ff;
  color: #3498db;
}

.request-completed .request-status {
  background-color: #f0fdf4;
  color: #4ecdc4;
}

.request-description {
  margin-bottom: 15px;
  color: var(--text-color);
}

.request-details {
  display: flex;
  justify-content: space-between;
}

.request-date, .request-update-date {
  display: flex;
  flex-direction: column;
}

.request-details span {
  font-size: 0.8rem;
  color: var(--gray);
}

.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px;
  border-radius: 8px;
  z-index: 1100;
}

.error {
  background-color: #fff5f5;
  color: #ff6b6b;
}

.success {
  background-color: #f0fdf4;
  color: #4ecdc4;
}

/* 列表动画 */
.request-list-enter-active,
.request-list-leave-active {
  transition: all 0.5s ease;
}

.request-list-enter-from,
.request-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .service-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .service-stats {
    width: 100%;
    justify-content: space-between;
  }

  .form-row {
    flex-direction: column;
  }
}
</style> 